<template>
  <a-layout class="cui-desktop">
    <!-- 在右滑面板中打开页面 -->
    <a-drawer :width="rightPanel.width" :visible="rightPanel.visible" :bodyStyle="{padding: 0}"
              closable :mask="false" :title="rightPanel.title" destroyOnClose @close="rightPanel.visible=false">
      <component :is="rightPanel.view" :pageParams="rightPanel.params" :pageWidth="rightPanel.width" :pageHeight="rightPanel.height" />
    </a-drawer>
    <!-- 在在主页内容区打开页面 -->
    <a-layout-content v-if="bodyRegion.view" class="coc-content" :style="{ height: clientHeight+'px' }">
      <component :is="bodyRegion.view" :pageParams="bodyRegion.params" :pageWidth="clientWidth" :pageHeight="clientHeight" />
    </a-layout-content>
    <!-- 在在主页TAB栏中打开页面 -->
    <a-layout-content v-else class="coc-content" :style="{ height: clientHeight+'px' }">
      <Tabs @tab-remove="doTabRemove" v-model="currTab" type="card">
        <TabPane v-for="(tab, index) in tabs" :label="tab.label" :key="index" :name="''+index" :closable="tab.closable" stretch>
          <component :is="tab.view" :pageParams="tab.params" :pageWidth="clientWidth" :pageHeight="clientHeight-38" />
        </TabPane>
      </Tabs>
    </a-layout-content>
  </a-layout>
</template>
<script>
import PageJS from './Page'
import {Tabs, TabPane} from 'element-ui'

export default {
  mixins: [PageJS],
  components: {Tabs, TabPane}
};
</script>
